<template>
  <div class="index">
    <comheadertwo></comheadertwo>
    <comnavtwo></comnavtwo>
    <main>
      <carouseltwo></carouseltwo>
      <div class="banner">
        <div class="top">
          <img v-lazy="picurl" />
        </div>
        <div class="bottom">
          <div
            v-for="(item, index) in bannerList"
            :key="index"
            @click="Goodsjump(item.id)">
            <img v-lazy="item.s_photos[0].path" />
          </div>
        </div>
      </div>
      <Itemtittle itemName="热门口红" id="lips"> </Itemtittle>
      <showbox :showlist="lipstickList"></showbox>
      <Itemtittle itemName="底妆" id="makeup"> </Itemtittle>
      <showbox :showlist="makeupList"></showbox>
      <Itemtittle itemName="妆前隔离" id="Primer"> </Itemtittle>
      <showbox :showlist="EXmakeup" style="height: 300px"></showbox>
      <Itemtittle itemName="香水" id="Perfume"> </Itemtittle>
      <showbox :showlist="perfumeList"></showbox>
    </main>
    <comfooter></comfooter>
    <Tracingpoint></Tracingpoint>
  </div>
</template>

<script>
import comheadertwo from "../components/common/comheadertwo.vue";
import comnavtwo from "../components/common/comnavtwo.vue";
import comfooter from "../components/common/comfooter.vue";
import carouseltwo from "../views/index/carouseltwo.vue";
import Itemtittle from "@/components/common/Itemtittle.vue";
import Tracingpoint from "@/components/common/Tracingpoint.vue";
import showbox from "../views/index/showbox.vue";
import { AdminLogin } from "@/api/AdminLogin";
import {
  banner,
  bannertop,
  lipstick,
  makeup,
  EXmakeup,
  perfume,
} from "@/api/Goods";
export default {
  data() {
    return {
      bannerList: [],
      picurl: "",
      lipstickList: [],
      makeupList: [],
      EXmakeup: [],
      perfumeList: [],
    };
  },
  components: {
    comheadertwo,
    comnavtwo,
    carouseltwo,
    Itemtittle,
    showbox,
    comfooter,
    Tracingpoint,
  },
  methods: {
    Goodsjump(id) {
      this.$router.push(
        {
          path: "/Detailspage",
          query: {
            id: id,
          },
        },
        () => {}
      );
    },
  },
  created: function () {
    AdminLogin()
      .then((res) => {
        sessionStorage.setItem("token", res.data.result.token);
      })
      .then(() => {
        banner().then((res) => {
          this.bannerList = res.data.result.rows;
        });
      })
      .then(() => {
        bannertop().then((res) => {
          this.picurl = res.data.result.rows[0].s_photos[0].path;
        });
      })
      .then(() => {
        lipstick().then((res) => {
          this.lipstickList = res.data.result.rows;
          this.$store.dispatch("lipstickListData", this.lipstickList);
        });
      })
      .then(() => {
        makeup().then((res) => {
          this.makeupList = res.data.result.rows;
          this.$store.dispatch("makeupListData", this.makeupList);
        });
      })
      .then(() => {
        EXmakeup().then((res) => {
          this.EXmakeup = res.data.result.rows;
          this.$store.dispatch("EXmakeupData", this.EXmakeup);
        });
      })
      .then(() => {
        perfume().then((res) => {
          this.perfumeList = res.data.result.rows;
          this.$store.dispatch("perfumeData", this.perfumeList);
        });
      })
  },
};
</script>
 <style lang="scss" scoped>
.index {
  width: 100%;
  background-color: black;
  main {
    width: 1200px;
    margin: 0 auto;
    .banner {
      margin-top: 20px;
      width: 100%;
      cursor: pointer;
      .top {
        height: 450px;
        img {
          width: 100%;
        }
      }
      .bottom {
        display: flex;
        div {
          width: 300px;
          height: 250px;
          background-color: #fff;
          img {
            width: 100%;
            height: 250px;
          }
        }
      }
    }
  }
}
</style>